<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/fontawesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
    <div id="categoryApp" class="container-fluid p-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">分类管理</h5>
                <div class="d-flex gap-2">
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="searchKey" placeholder="搜索分类...">
                        <button class="btn btn-primary" @click="searchCategories">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                    <button class="btn btn-success" style="min-width: 120px;" @click="handleAdd">
                        <i class="fas fa-plus"></i> 添加分类
                    </button>
                </div>
            </div>
            <div class="card-body table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>分类名称</th>
                            <th>模板数量</th>
                            <th>排序</th>
                            <th>创建时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="category in categories" :key="category.id">
                            <td>{{ category.name }}</td>
                            <td>
                                <span class="badge bg-primary">{{ category.template_count }} 个模板</span>
                            </td>
                            <td>
                                <div class="input-group input-group-sm" style="width: 120px;">
                                    <input type="number" 
                                           class="form-control" 
                                           v-model="category.sort_order"
                                           min="0"
                                           @change="handleSortChange(category)">
                                    <span class="input-group-text">
                                        <i class="fas fa-sort"></i>
                                    </span>
                                </div>
                            </td>
                            <td>{{ category.create_time }}</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" 
                                               type="checkbox"
                                               :checked="category.is_active == 1"
                                               @change="toggleCategoryStatus(category)"
                                               :disabled="updating === category.id">
                                    </div>
                                    <span :class="category.is_active == 1 ? 'text-success' : 'text-danger'">
                                        {{ category.is_active == 1 ? '启用' : '禁用' }}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-primary" @click="handleEdit(category)">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-sm btn-danger" @click="handleDelete(category)">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <nav>
                    <ul class="pagination justify-content-center mb-0">
                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                            <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                        </li>
                        <li v-for="page in pageNumbers" 
                            :key="page" 
                            class="page-item"
                            :class="{ active: currentPage === page }">
                            <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                        </li>
                        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                            <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- 添加/编辑分类模态框 -->
        <div class="modal fade" id="categoryModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ form.id ? '编辑分类' : '添加分类' }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label class="form-label">分类名称</label>
                                <input type="text" class="form-control" v-model="form.name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">分类描述</label>
                                <textarea class="form-control" v-model="form.description" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           v-model="form.is_active"
                                           true-value="1"
                                           false-value="0"
                                           id="categoryStatus">
                                    <label class="form-check-label" for="categoryStatus">
                                        启用分类
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">排序优先级</label>
                                <div class="input-group">
                                    <input type="number" 
                                           class="form-control" 
                                           v-model="form.sort_order"
                                           min="0">
                                    <span class="input-group-text">
                                        <small class="text-muted">数字越小越靠前</small>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="saveCategory">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/bootstrap.bundle.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/pages/categories.js"></script>
</body>
</html> 